<%--
  Created by IntelliJ IDEA.
  User: 郭宇轩
  Date: 2021/1/5
  Time: 9:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<script>
    window.onload = function(){
        //获取文本输入框
        var textElment = document.getElementById("text");
        //获取下提示框
        var div = document.getElementById("tips");
        textElment.onkeyup=function(){
            //获取用户输入的值
            var text = textElment.value;
            //如果文本框中没有值，则下拉框被隐藏，不显示
            if(text==""){
                div.style.display="none";
                return;
            }
            //获取XMLHttpRequest对象
            var xhr = new XMLHttpRequest();
            //编写回调函数
            xhr.onreadystatechange=function(){
                //判断回调的条件是否准备齐全
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        //取的服务器端传回的数据
                        var str = xhr.responseText;

                        //判断传回的数据是否为空,若是则直接返回，不显示
                        if(str==""){
                            div.style.display="none";
                            return;
                        }
                        //我们将会在服务器端把数据用 , 隔开，当然这里也可以使用json
                        var result = str.split(",");
                        var childs = "";
                        //遍历结果集，将结果集中的每一条数据用一个div显示，把所有的div放入到childs中
                        for(var i=0; i<result.length;i++){
                            childs += "<div style='z-index: 100' onclick=' Write(this)' onmouseout='recoverColorwhenMouseout(this)' onmouseover='changeColorwhenMouseover(this)'>"+result[i]+"</div>";
                        }
                        //把childs 这div集合放入到下拉提示框的父div中，上面我们以获取了
                        div.innerHTML=childs;
                        div.style = "    float: left;\n" +
                            "    position: absolute;\n" +
                            "    left:252px;\n" +
                            "    top: 48px;\n" +
                            "    z-index: 20;\n" +
                            "    display: block;\n" +
                            "    width: 495px;\n" +
                            "    background-color: whitesmoke;\n" +
                            "    border : 0px;\n" +
                            "    opacity: 100%; \n" +
                            "    color: black;";
                    }
                }
            }

            //创建与服务器的连接
            xhr.open("GET","${pageContext.request.contextPath}/AutoComplete?text="+text);


            //发送
            xhr.send();
        }
    }
    //鼠标悬停时改变div的颜色
    function changeColorwhenMouseover(div){
        div.style.backgroundColor="black";
        div.style.color="orange";
    }
    //鼠标移出时回复div颜色
    function recoverColorwhenMouseout(div){
        div.style.backgroundColor="";
        div.style.color="";
    }
    //当鼠标带点击div时，将div的值赋给输入文本框
    function Write(div){
        //将div中的值赋给文本框
        document.getElementById("text").value=div.innerHTML;

        //让下拉提示框消失

        div.parentNode.style.display="none";
    }
</script>
<body>

<div id="tips"></div>

<div id="Header">
    <form action="${pageContext.request.contextPath}/SearchServlet" method="post">

        <a style="position: absolute; left:0px; top: 0px" href="${pageContext.request.contextPath}/index.jsp"><img src="${pageContext.request.contextPath}/images/logo.png" width="130" height="65"/></a>

        <input id="text" type="text" src="" name="keyword"  />
        <input id="search" type="submit" value="搜索"/>

    </form>

    <% if (session.getAttribute("username") == null ){ %>
    <a class="header" style="left: 1400px" href="${pageContext.request.contextPath}/User/Login.jsp"> 登录</a>
    <a class="header" style="left: 1500px" href="${pageContext.request.contextPath}/User/Register.jsp">注册</a>

    <% } else { %>

    <a class="header" style="left: 1250px" href="${pageContext.request.contextPath}/GetCartPetInfoServlet" >购物车</a>
    <a class="header" style="left: 1330px"href="${pageContext.request.contextPath}/GetOrderInfoServlet" >订单</a>
    <p><a class="header"style="left: 1390px" href="${pageContext.request.contextPath}/User/UserInfo.jsp">个人空间</a></p>
    <a class="header"  style="left: 1500px" href="${pageContext.request.contextPath}/LogoutServlet">注销</a>
    <% }%>

    <HR align=center width=100% style="position: absolute;top: 55px;color: orange" SIZE=1>
</div>
<div id="Category">
    <a class="category" style=" z-index:0; left: 20%" type="submit" onclick="window.location = '${pageContext.request.contextPath}/PetInfo/Category.jsp?petClass=Cat'" >Cat</a>
    <a class="category" style="left: 48%" type="submit" onclick="window.location = '${pageContext.request.contextPath}/PetInfo/Category.jsp?petClass=Dog'" >Dog</a>
    <a class="category" style="left: 80%" type="submit" onclick="window.location = '${pageContext.request.contextPath}/PetInfo/Category.jsp?petClass=Bird'" >Bird</a>
    <HR align=center width=100% style="position: absolute;top: 90px;color: white" SIZE=1>
</div>

